<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="病案复印申请详情"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<view v-if="formData.id">

				<view class="dawn-wrap tn-margin-top-sm">
					<!-- <view class="dawn-border-bottom tn-padding-bottom-ss dawn-color-dark ">
						<text class="tn-icon-image-text-fill"></text>
						<text class="">申请概况</text>
					</view> -->
					<view class="">
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">申请单号</view>
							</view>
							<view class="list-box__right" @click="copyData(formData.applyNo)">
								<text>{{ formData.applyNo }}</text>
								<text class="tn-icon-copy-fill dawn-color-dark tn-margin-left-ss"></text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">申请时间</view>
							</view>
							<view class="list-box__right">
								<text>{{ formatDateTime(formData.createTime)  || '' }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">申请状态</view>
							</view>
							<view class="list-box__right">
								<!-- <text>{{ formData.status }}</text> -->
								<StatusView type="medicalcopy" ui="tag" :status="formData.status"></StatusView>
							</view>
						</view>
						<view v-if="formData.status === 2">
							<view class="list-box" style="display: block;">
								<view class="list__left">
									<view class="list__left__text">审核失败原因</view>
								</view>
								<view class="dawn-radius tn-margin-top-sm tn-padding-sm tn-bg-dawn-gray">
									<view class="dawn-text-sm">
										<text class="">{{ formData.examine }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="dawn-wrap tn-margin-top-sm" v-if="formData.status === 7 || formData.status === 8">
					<view class="dawn-border-bottom tn-padding-bottom-ss dawn-color-dark ">
						<text class="tn-icon-logistics-fill"></text>
						<text class="">快递信息</text>
					</view>
					<view class="">
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">快递公司</view>
							</view>
							<view class="list-box__right">
								<text>{{ formData.deliveryName }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">快递单号</view>
							</view>
							<view class="list-box__right" @click="copyData(formData.deliveryNo)">
								<text>{{ formData.deliveryNo }}</text>
								<text class="tn-icon-copy-fill dawn-color-dark tn-margin-left-ss"></text>
							</view>
						</view>
					</view>
				</view>


				<view class="dawn-wrap tn-margin-top-sm" v-if="formData.status > 3">
					<view class="dawn-border-bottom tn-padding-bottom-ss dawn-color-dark ">
						<text class="tn-icon-money-fill"></text>
						<text class="">支付信息</text>
					</view>
					<view class="">
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">订单号</view>
							</view>
							<view class="list-box__right" @click="copyData(formData.orderNumber)">
								<text>{{ formData.orderNumber }}</text>
								<text class="tn-icon-copy-fill dawn-color-dark tn-margin-left-ss"></text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">支付时间</view>
							</view>
							<view class="list-box__right">
								<text>{{ formatDateTime(formData.payTime)  || '' }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">支付金额</view>
							</view>
							<view class="list-box__right">
								<tn-tag class="dawn-tag-sm dawn-tag-sm__1">¥
									{{ formData.totalPrice  }}</tn-tag>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">支付状态</view>
							</view>
							<view class="list-box__right">
								<StatusView type="medicalcopy" ui="tag" :status="formData.payStatus"></StatusView>
							</view>
						</view>
					</view>
				</view>

				<view class="dawn-wrap dawn-shadow tn-margin-top-sm">
					<view class="dawn-border-bottom tn-padding-bottom-ss dawn-color-dark">
						<text class="tn-icon-image-text-fill "></text>
						<text class="">申请信息</text>
					</view>
					<view class="">
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">患者类型</view>
							</view>
							<view class="list-box__right">
								<!-- <text>{{ formData.patientType }}</text> -->
								<tn-tag class="dawn-tag-sm dawn-tag-sm__2">
									{{ formData.patientType  }}</tn-tag>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">患者姓名</view>
							</view>
							<view class="list-box__right">
								<text>{{ formData.patientName }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">患者证件号</view>
							</view>
							<view class="list-box__right">
								<text>{{ formData.patientCardNo }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">住院号</view>
							</view>
							<view class="list-box__right" @click="copyData(formData.hospitalNo)">
								<text class="dawn-color-red">{{ formData.hospitalNo }}</text>
								<text class="tn-icon-copy-fill dawn-color-dark tn-margin-left-ss"></text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">出院日期</view>
							</view>
							<view class="list-box__right">
								<text>{{ formData.leaveHospitalDate }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">出院科室</view>
							</view>
							<view class="list-box__right">
								<text>{{ formData.leaveHospitalDept }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">病案类型</view>
							</view>
							<view class="list-box__right">
								<text>{{ formData.medicalType }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">病案用途</view>
							</view>
							<view class="list-box__right">
								<text>{{ formData.purpose }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">病案内容</view>
							</view>
							<view class="list-box__right">
								<text>{{ formData.content }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">复印份数</view>
							</view>
							<view class="list-box__right">
								<text class="dawn-color-red">{{ formData.number }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="dawn-wrap tn-margin-top-sm">
					<!-- <view class="dawn-border-bottom tn-padding-bottom-ss">
					<text class="tn-icon-title"></text>
					<text class="">申请信息</text>
				</view> -->
					<view class="">
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">申请人姓名</view>
							</view>
							<view class="list-box__right">
								<text>{{ formData.applicantName }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">申请人证件号</view>
							</view>
							<view class="list-box__right">
								<text>{{ formData.applicantCardNo }}</text>
							</view>
						</view>
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">与患者关系</view>
							</view>
							<view class="list-box__right">
								<text class="dawn-color-red">{{ formData.relation }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="dawn-wrap tn-margin-top-sm">
					<!-- <view class="dawn-border-bottom tn-padding-bottom-ss">
						<text class="tn-icon-title"></text>
						<text class="">收取方式</text>
					</view> -->
					<view class="">
						<view class="list-box">
							<view class="list__left">
								<view class="list__left__text">收取方式</view>
							</view>
							<view class="list-box__right">
								<tn-tag class="dawn-tag-sm dawn-tag-sm__4">
									{{ formData.collectType  }}</tn-tag>
							</view>
						</view>
						<view class="">
							<view v-if="formData.collectType === '邮寄'"
								class="dawn-radius tn-margin-xs tn-bg-dawn-gray tn-padding-sm">
								<view class="dawn-text-sm">
									<text class="">{{ formData.recipientAddress }}</text>
								</view>
								<view class="">
									<text class="tn-padding-right-ss">{{ formData.recipientName }}</text>
									<text class="">{{ formData.recipientPhone }}</text>
								</view>
							</view>
							<view v-else class="">
								<view class="list-box">
									<view class="list__left">
										<view class="list__left__text">取件地址</view>
									</view>
									<view class="list-box__right">
										<text>{{ formData.recipientAddress }}</text>
									</view>
								</view>
								<view class="list-box">
									<view class="list__left">
										<view class="list__left__text">取件人</view>
									</view>
									<view class="list-box__right">
										<text>{{ formData.recipientName }}</text>
									</view>
								</view>
								<view class="list-box">
									<view class="list__left">
										<view class="list__left__text">取件人电话</view>
									</view>
									<view class="list-box__right">
										<text>{{ formData.recipientPhone }}</text>
									</view>
								</view>

							</view>

						</view>
					</view>
				</view>



				<view>

					<view class="dawn-wrap tn-margin-top-sm ">
						<view class="dawn-border-bottom tn-padding-bottom-ss dawn-color-dark">
							<text class="tn-icon-identity-fill"></text>
							<text class="">患者证件照</text>
						</view>

						<view class="upload-card-box tn-width-full" v-if="formData.patientType === '年满18岁'">
							<view class="card-img">
								<image v-if="formData.patientCardImgFront" @click="previewImage('patientCardImgFront')"
									:src='formData.patientCardImgFront' class="card-img__img" mode="widthFix" />
								<text class="card-img__text">身份证人像面</text>
							</view>
							<view class="card-img">
								<image v-if="formData.patientCardImgReverse"
									@click="previewImage('patientCardImgReverse')" :src='formData.patientCardImgReverse'
									class="card-img__img" mode="widthFix" />
								<text class="card-img__text">身份证国徽面</text>
							</view>
							<!-- <view class="card-img">
								<image v-if="formData.patientCardImgHandheld"
									@click="previewImage('patientCardImgHandheld')"
									:src='formData.patientCardImgHandheld' class="card-img__img" mode="widthFix" />
								<text class="card-img__text">身份证手持照</text>
							</view> -->
						</view>

						<view v-else class="upload-card-box tn-width-full" style="justify-content:space-around;">
							<view class="card-img">
								<image v-if="formData.patientCardImgFront" @click="previewImage('patientCardImgFront')"
									:src='formData.patientCardImgFront' class="card-img__img" mode="widthFix" />
								<text class="card-img__text">患者户口本页</text>
							</view>
							<view class="card-img">
								<image v-if="formData.patientCardImgReverse"
									@click="previewImage('patientCardImgReverse')" :src='formData.patientCardImgReverse'
									class="card-img__img" mode="widthFix" />
								<text class="card-img__text">申请人户口本页</text>
							</view>
						</view>
					</view>

					<view v-if="formData.relation !== '本人'">
						<view class="dawn-wrap tn-margin-top-sm ">
							<view class="dawn-border-bottom tn-padding-bottom-ss dawn-color-dark">
								<text class="tn-icon-identity-fill"></text>
								<text class="">申请人证件照</text>
							</view>

							<view class="upload-card-box tn-width-full">
								<view class="card-img">
									<image v-if="formData.applicantCardImgFront"
										@click="previewImage('applicantCardImgFront')"
										:src='formData.applicantCardImgFront' class="card-img__img" mode="widthFix" />
									<text class="card-img__text">身份证人像面</text>
								</view>
								<view class="card-img">
									<image v-if="formData.applicantCardImgReverse"
										@click="previewImage('applicantCardImgReverse')"
										:src='formData.applicantCardImgReverse' class="card-img__img" mode="widthFix" />
									<text class="card-img__text">身份证国徽面</text>
								</view>
								<!-- <view class="card-img">
									<image v-if="formData.applicantCardImgHandheld"
										@click="previewImage('applicantCardImgHandheld')"
										:src='formData.applicantCardImgHandheld' class="card-img__img"
										mode="widthFix" />
									<text class="card-img__text">身份证手持照</text>
								</view> -->
							</view>
						</view>

						<view class="dawn-wrap tn-margin-top-sm ">
							<view class="dawn-border-bottom tn-padding-bottom-ss dawn-color-dark">
								<text class="tn-icon-image-fill"></text>
								<text class="">授权委托书</text>
							</view>

							<view class="upload-card-box tn-width-full">
								<view class="card-img">
									<image v-if="formData.otherFile" @click="previewImage('otherFile')"
										:src='formData.otherFile' class="card-img__img" mode="widthFix" />
									<text class="card-img__text">授权委托书</text>
								</view>
							</view>
						</view>

					</view>
				</view>

			</view>

			<view v-if="show">
				<dawnMsg :box="dawnMsgBox" :msg="msg"></dawnMsg>
			</view>
		</view>

		<!-- 悬浮按钮-->
		<view class="tn-flex tn-footerfixed" v-if="formData.status === 1 || formData.status === 3">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
				<tn-button width="90%" @click="toOrderInfo(formData)" backgroundColor="tn-main-gradient-danger"
					size="lg" shadow>
					<text class="tn-icon-check tn-padding-right-ss"></text>
					<text class="tn-text-ellipsis">确认支付</text>
				</tn-button>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>

	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as MedicalCopyApi from '@/api/hospital/medicalcopy.js';
	import * as PatientApi from '@/api/hospital/patient.js';
	import * as UserPatient from '@/libs/userPatient.js';
	import * as ArticleApi from '@/api/cms/article.js';
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import eHealth from "@/libs/eHealth.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'create',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo']),
		data() {
			return {
				heightInput: 60,
				loading: false,
				show: false,
				msg: '',
				dawnMsgBox: '',
				success: false,
				showAgree: false,
				maskCloseable: false,
				borderRadius: 40,
				notice: [],
				radiusNotice: 15,
				closeNoticeShow: true,
				queryData: {
					id: 0
				},
				formData: {},
				list: [],
				article: {},
				dictData: {},
			}
		},
		onLoad(options) {
			if (!this.isLogin || !this.userInfo.id) {
				this.loading = true;
				toLogin();
			} else {
				if (options.hasOwnProperty('itemId')) {
					this.queryData.id = options.itemId;
				}
				this.getData();
			}
		},
		methods: {
			initData() {
				let that = this;

				ArticleApi.getArticlePage({
					categoryKey: config.CMS_TYPE.MEDICAL_NOTICE
				}).then(res => {
					console.table(res)
					if (res.code === 0) {
						const l = res.data.list || [];
						if (l.length > 0) {
							let str = this.$util.htmlToStr(l[0].description);
							that.notice.push(str);
							that.$set(this, 'article', l[0]);
						}
					}
				});
			},
			getData: function() {
				let that = this;
				this.loading = true;
				this.show = false;
				this.queryData.userId = this.userInfo.id;
				this.queryData.openid = this.userInfo.openid;
				MedicalCopyApi.getMedicalCopy(this.queryData).then(res => {
					this.loading = false;
					console.table(res);
					if (res.code === 0) {
						this.$set(this, 'formData', res.data);
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			// 预览
			previewImage(name) {
				console.info(this.formData[name]);
				var url = this.formData[name];
				uni.previewImage({
					urls: [url],
				});
			},
			toOrderInfo(item) {
				// uni.navigateTo({
				// 	url: '/hosp/order/info?orderNumber=' + item.applyNo
				// })
				this.toPayUI(item.applyNo);
			},
			strMask(str) {
				return this.$util.strMask(str, 6);
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-icon-text,
	.list-image-text {
		padding: 20rpx 5rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}

	.list-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 10rpx;
		border-bottom: 1rpx solid $dawn-line-color;

		&__left {
			display: flex;
			align-items: center;
			justify-content: end;
			width: 90px;
			padding-right: 10rpx;
			white-space: nowrap;
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: calc(100% - 90px);
			;

			&__text {
				font-size: $dawn-font-size-lg;
				font-weight: bolder;
			}

			&__icon {
				font-size: 40rpx;
				padding-left: 7rpx;
			}
		}
	}

	.upload-card-box {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: baseline;
		padding: 10px 0;
	}

	.card-img {
		width: 35%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&__img {
			width: 100%;
			height: 120rpx;
			border-radius: $dawn-border-radius;
		}

		&__text {
			margin-top: 10rpx;
			font-size: $dawn-font-size-ss;
			color: $dawn-color-grey;
			text-align: center;
			white-space: nowrap;
		}
	}

	.dawn-check-box {
		position: relative;
		padding: 20rpx 0rpx;
		margin: 10rpx;
		border-radius: $dawn-box-radius;
		text-align: center;
		white-space: nowrap;
		background-color: $dawn-bg-grey !important;

		&__select {
			transition: transform .4s;
			font-size: $dawn-font-size-md + 2;
			// font-weight: bolder;
			background-color: $dawn-theme-color-light !important;

			&--icon {
				color: $dawn-theme-color !important;
				position: absolute;
				bottom: -4upx;
				right: -2upx;
				font-size: 40rpx;
				text-align: center;
				// line-height: 50upx;
			}

			&--reverse {
				transform: rotate(-180deg);
			}
		}
	}
</style>